import {inject, observer} from "mobx-react";
import {WeaTableNew} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import {WeaTools, WeaTop, WeaRightMenu, WeaTab, WeaLocaleProvider} from 'ecCom';
import {Button} from 'antd';
import * as InteUtil from '../util/util';
import {toJS} from 'mobx';

const { getLabel } = WeaLocaleProvider;

@inject("tabListStore")
@observer
class InteTabList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchType: ['base','advanced'],
    }
  }
  componentDidMount() {
    let {showTypeId} = this.props.params;
    let {tabListStore} = this.props;
    tabListStore.getTitle(showTypeId);
    tabListStore.getCondition();
    tabListStore.search();
  }

  onSearch = () => {
    let {tabListStore} = this.props;
    tabListStore.setShowSearchAd(false);
    tabListStore.search(); 
  }

  getDropMenuProps = (title) => {
    let collectParams = this.getCollectParams(title);
    return {collectParams};
  }

  getCollectParams = (title) => {
    return {
      favname: title,
      favouritetype: 1,
      objid: 0,
      link: "spa/inte/static/index.html#/main/inte/tab",
      importantlevel: 1
    }
  }

  onReset = ()=> this.props.tabListStore.form.reset();

  onCancelFormSearch = ()=> this.props.tabListStore.setShowSearchAd(false);

  getButtonsAd = () => {
    return [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8nwue2@InteTabListSearch`} type="primary" onClick={this.onSearch}>{getLabel('388113','搜索')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@refcfn@InteTabListReset`} type="ghost" onClick={this.onReset}>{getLabel('2022','重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tdj7o1@InteTabListCancel`} type="ghost" onClick={this.onCancelFormSearch}>{getLabel('31129','取消')}</Button>
    ]
  }

  getButtons = () => {
    const {
      tabListStore,
    } = this.props, {
      tableStore,
    } = tabListStore;

    return [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rpwe74@CurrentExport`} type="primary" onClick={tableStore.exportCurrent}>{getLabel('386938','当页导出')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@r4qs9r@AllExport`} type="primary" onClick={tableStore.exportAll}>{getLabel('125595','全部导出')}</Button>,
    ]
  }

  onSearchChange = v => { 
    const {
      tabListStore,
    } = this.props, {
      form,
    } = tabListStore;

    let baseKey = this.getBaseKey();
    let obj = {};
    obj[baseKey] = v;
    form.updateFields(obj); 
  } 

  getSearchsBaseValue = () => {
    const {
      tabListStore,
    } = this.props, {
      form,
    } = tabListStore, {
      isFormInit,
    } = form;
    let baseKey = this.getBaseKey();

    return isFormInit && form.getFormParams() && form.getFormParams()[baseKey];
  }

  getBaseKey = () => {
    const {
      tabListStore,
    } = this.props, {
      conditions,
    } = tabListStore;

    return (toJS(conditions) && toJS(conditions).length > 0 && toJS(conditions)[0].items.length > 0) ? toJS(conditions)[0].items[0].domkey[0] : 'init';
  }

  setShowSearchAd = bool => this.props.tabListStore.setShowSearchAd(bool);

  hideSearchAd = () => this.props.tabListStore.setShowSearchAd(false);

  render() {
    const {
      tabListStore,
    } = this.props, {
      tableStore, 
      title,
      form,
      showSearchAd, 
      conditions,
    } = tabListStore, {
      searchType,
    } = this.state;
    
    return (
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@af1yi1`} datas={[]}
          collectParams={this.getCollectParams(title)} 
          onClick={this.onDropMenuClick}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@1k6hi8`}
            title={title}
            icon={<i className='icon-coms-integration' />}
            iconBgcolor='#1A57A0'
            showDropIcon={true}
            dropMenuDatas={[]}
            dropMenuProps={this.getDropMenuProps(title)}
          >
            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@7xmizi`}
              buttonsAd={this.getButtonsAd()}
              buttons={this.getButtons()}
              searchType={searchType}
              searchsBaseValue={this.getSearchsBaseValue()}
              setShowSearchAd={this.setShowSearchAd}
              showSearchAd={showSearchAd}
              hideSearchAd={this.hideSearchAd}
              searchsAd={InteUtil.getSearchs(form, conditions, this.onSearch, "inteTablist", this && this.props && this.props.ecId || '')}
              advanceHeight={150}
              onSearch={this.onSearch}
              onSearchChange={this.onSearchChange}
            />
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@xyj1t1`} comsWeaTableStore={tableStore}/>
          </WeaTop>
        </WeaRightMenu>
    );
  }
  
  onDropMenuClick = (key) => {
    if ('search' == key) {
      this.props.tabListStore.search();
    }
  }
  
}
const getDropList = () => {
  let dropMenuList = [];
  return dropMenuList;
}

export default InteTabList;